import { Button, Modal } from 'antd';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

const PricacyPolicy = 'Privacy Policy';
function Footer() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const { t } = useTranslation(['translation']);

  const showModal = () => setIsModalVisible(true);

  const handleCancel = () => setIsModalVisible(false);

  return (
    <Div>
      <span className="privacyPolicy">
        <a onClick={showModal}>{PricacyPolicy}</a>
      </span>
      <span> | </span>
      <span className="copyright">
        Copyright © Samsung Electronics Co.,Ltd. All right reserved
      </span>
      <span className="confidential">Confidential</span>
      <Modal
        title={PricacyPolicy}
        visible={isModalVisible}
        onCancel={handleCancel}
        width={600}
        footer={<Button onClick={handleCancel}>Close</Button>}
        maskStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.25)' }}
        bodyStyle={{ color: '#515151', fontSize: 12 }}
      >
        {t([PricacyPolicy])}
      </Modal>
    </Div>
  );
}
export default Footer;

const Div = styled.div`
  text-align: center;
  color: #515151;
  font-size: 12px;
  padding: 6px 0;
  .privacyPolicy {
    > a {
      color: #515151;
    }
    &:hover {
      text-decoration: underline;
    }
  }
  .confidential {
    color: #fb2c58;
    border: 1px solid #fb2c58;
    padding: 0 8px;
    margin-left: 8px;
  }
  .ant-modal-title {
    font-size: 14px;
    color: #515151;
  }
`;
